<template>
  <div>
    <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off">
      <a-form-item>

        <el-cascader :props="{ multiple: true }" v-model="formState.name" :options="opbulletin" max-collapse-tags="1"
          collapse-tags collapse-tags-tooltip />
      </a-form-item>
      <a-form-item>
        <a-range-picker v-model:value="formState.time" :placeholder="['收藏开始日期', '收藏结束日期']" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)" @click="getData">查询</a-button>
      </a-form-item>
    </a-form>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :key="item.id" v-for="item in activeLiss">
        <template #tab>
          <span @click="activeClick(item)">
            {{ item.name }}
          </span>
        </template>
      </a-tab-pane>
    </a-tabs>
    <div class="table-s">
      <div class="table_i">
        <div class="details-a">
          <div class="table_title">临翔城市供排水有限责任公司各自来水厂，污水处理厂建筑物及构筑物分布式光伏屋顶出租竞争性谈判公告</div>
          <div class="table_zhi">招标</div>
          <div class="table_type">竞争性谈判</div>
          <div class="table_type">采购意向</div>
        </div>
        <div class="details-b">
          <div style="display: flex;margin-left: 20px;">
            <div class="sj">
              <img src="../../../../assets/img/组 4768@2x.png" alt="" />
            </div>
            <div class="sj-a" style="font-size: 14px; font-weight: 400; color: #fe8d03">
              {{ money(1800000) }}
            </div>
          </div>
          <div style="display: flex;margin-left: 20px;">
            <div class="sj">
              <img src="../../../../assets/img/路径 4071@2x.png" alt="" />
            </div>
            <div class="sj-a">北京</div>
          </div>
          <div style="display: flex;margin-left: 20px;">
            <div class="sj">
              <img src="../../../../assets/img/组 4764@2x.png" alt="" />
            </div>
            <div class="sj-a">{{ timestamp1("1715222933") }}</div>
          </div>
        </div>
        <!-- <div><img src="../../../../assets/img/组 5329@2x.png" alt=""> <div>229.68万元</div> </div> -->
      </div>
      <div class="tavle_right">
        <div class="table_s">已投标</div>
        <div class="table_y">备注</div>
        <div class="table_z">2024-01-29 20:00:23</div>
      </div>
      <div class="divider"></div>
      <!-- <el-divider></el-divider> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { h } from "vue";
import { getInfomationchild1 } from "@/Api/ccc.js";
import { SearchOutlined } from "@ant-design/icons-vue";
import { timestamp, timestamp1, type_status, diqu, money } from "@/utils/index";

const formState = ref({
  username: "",
  time: "",
});
const opbulletin = ref([]);
const getInfomationchilds = () => {
  getInfomationchild1().then((res) => {
    opbulletin.value = res.data.data
    // console.log(opbulletin.value);

  });
};
getInfomationchilds();
let activeKey = ref("1");
let activeLiss = [
  {
    id: "1",
    name: "全部",
  },
  {
    id: "2",
    name: "联系中",
  },
  {
    id: "3",
    name: "已投标",
  },
  {
    id: "4",
    name: "已合作",
  },
  {
    id: "5",
    name: "放弃",
  },
  {
    id: "6",
    name: "不相关",
  },
  {
    id: "7",
    name: "已中标",
  },
  {
    id: "8",
    name: "未中标",
  },
];
// tabs按钮
const activeClick = () => {

}

</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}

.ant-tabs {
  margin-left: 20px;
  margin-top: 10px;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 0 !important;
}

.table_i {
  display: flex;
  padding-top: 24px;
  justify-content: space-between;
}

.table_title {
  max-width: 752;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  /* 使用省略号表示文本溢出 */
  margin-right: 10px;
  font-weight: 400;
font-size: 16px;
}

.details-a {
  display: flex;
  // ma
}

.details-b {
  height: 14px;
  display: flex;

}

.sj {
  width: 14px !important;
  height: 14px;
  margin-right: 4px;
  margin-top: -2px;
}

.sj-a {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #a9b1be;
  opacity: 1;
}

.table_type {
  padding: 5px 12px;
  background-color: #F5F5F5;
  margin-top: -5px;
  margin-right: 10px;
  font-weight: 400;
font-size: 14px;
}

.table_zhi {
  padding: 5px 12px;
  background: #FCE2E0;
  margin-top: -5px;
  margin-right: 10px;
  font-weight: 400;
font-size: 14px;
}
.tavle_right{
  padding: 10px 20px;
  background: #F5F5F5;
  display: flex;
  max-width: 740px;
  margin-top: 19px;
  // min-width: 350px;
  height: 44px;
  width: fit-content;
}
.divider{
  margin-top: 20px;
  height: 1px;
  width: 100%;
  background-color: #eee;
}
.table_s{
  padding: 5px 10px;
  border-radius: 20px;
  background: #F43107;
  color: #fff;
  font-size: 14px;
}
.table_y{
  line-height: 24px;
  margin-left: 20px;
  max-width: 364px;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  /* 使用省略号表示文本溢出 */
  font-weight: 400;
font-size: 14px;
}
.table_z{
  margin-left: 50px;
   line-height: 24px;
   font-weight: 400;
font-size: 12px;
}
:deep(.ant-tabs-tab-activeb){
  font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
}
:deep(.ant-tabs-tab){
  font-weight: 400;
font-size: 16px;
}
</style>